<template>
  <div>
    <el-card>
      <div v-for="(resource, index) in menuData" :key="index">
        <div class="p20 topbg">
          <el-checkbox
            :indeterminate="isIndeterminate[index]"
            v-model="resource.checked"
            @change="handleCheckAllChange(resource.id)"
            >{{ resource.name }}</el-checkbox
          >
        </div>
        <div class="p20">
          <el-row>
            <el-col :span="8" v-for="res in resource.children" :key="res.id">
              <el-checkbox
                v-model="res.checked"
                @change="resCheckedChange(resource.id)"
                >{{ res.name }}</el-checkbox
              >
            </el-col>
          </el-row>
        </div>
      </div>
      <div style="margin-top: 20px; text-align: center">
        <el-button type="primary" size="small" @click="updateMenu"
          >保存</el-button
        >
        <el-button size="small" @click="clear">清空</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  getResourceByRoleId,
  getAllResource,
  getResourceCate,
  updateRoleRes,
} from "@/request/api";
export default {
  data() {
    return {
      roleId: "",
      menuData: {},
      isIndeterminate: {},
    };
  },
  methods: {
    updateMenu() {
      this.$confirm(`此操作将删除当前用户, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let resArr = [];
          for (let i in this.menuData) {
            for (let j = 0; j < this.menuData[i].children.length; j++) {
              if (this.menuData[i].children[j].checked) {
                resArr.push(this.menuData[i].children[j].id);
              }
            }
          }
          updateRoleRes({
            resourceIds: resArr.join(","),
            roleId: this.roleId,
          }).then((res) => {
            if (res.code === 200) {
              this.$message.success(res.message);
              this.$router.replace("/ums/role");
            }
          });
        })
        .catch(() => {});
    },
    clear() {
      for (let i in this.menuData) {
        this.menuData[i].checked = false;
        this.isIndeterminate[i] = false;
        for (let j = 0; j < this.menuData[i].children.length; j++) {
          this.$set(this.menuData[i].children[j], "checked", false);
        }
      }
    },
    handleCheckAllChange(id) {
      for (let i = 0; i < this.menuData[id].children.length; i++) {
        if (this.menuData[id].checked) {
          this.isIndeterminate[id] = false;
          this.$set(this.menuData[id].children[i], "checked", true);
        } else {
          this.isIndeterminate[id] = false;
          this.$set(this.menuData[id].children[i], "checked", false);
        }
      }
    },
    resCheckedChange(pid) {
      let count = 0;
      for (let i = 0; i < this.menuData[pid].children.length; i++) {
        if (this.menuData[pid].children[i].checked) {
          count++;
        }
      }
      if (this.menuData[pid].children.length - count === 0) {
        this.menuData[pid].checked = true;
        this.isIndeterminate[pid] = false;
      } else {
        if (count == 0) {
          this.menuData[pid].checked = false;
          this.isIndeterminate[pid] = false;
        } else {
          this.isIndeterminate[pid] = true;
        }
      }
    },
  },
  async created() {
    this.roleId = this.$route.query.id;
    let res1 = await getResourceByRoleId(this.roleId);
    let selectArr = [];
    if (res1.code === 200) {
      selectArr = res1.data.map((item) => item.id);
    }
    // 资源分类
    let resCate = await getResourceCate();
    // 资源
    let res = await getAllResource();

    // 组合
    let newRes = {};
    if (resCate.code === 200) {
      for (let i = 0; i < resCate.data.length; i++) {
        let cData = resCate.data[i];
        newRes[cData.id] = { ...cData, children: [] };
      }
    }
    if (res.code === 200) {
      for (let j = 0; j < res.data.length; j++) {
        let rData = res.data[j];
        if (selectArr.indexOf(rData.id) > -1) {
          rData = { ...rData, checked: true };
        }
        newRes[rData.categoryId].children.push(rData);
      }
    }
    this.menuData = newRes;
    for (let i = 0; i < resCate.data.length; i++) {
      this.resCheckedChange(resCate.data[i].id);
    }
  },
};
</script>

<style lang="less" scoped>
.p20 {
  padding: 20px;
}
.topbg {
  background-color: #f2f6fc;
}
</style>